import {
    Row,
    Col,
    Input,
    DatePicker,
    Button,
    Table
} from 'antd'
import { useMemo, useEffect, useState, useRef, useLayoutEffect } from "react";
import { getAllOrder } from './../../../api/order/queryorder'

const QueryOrder = () => {


    const columns = useMemo(()=>[
        {title: '用户名',dataIndex: 'roomname',key:'roomname'},
        {title: '房间号',dataIndex: 'roomname',key:'roomname'},
        {title: '价格',dataIndex: 'price',key: 'price'},
        {title: '手机号码',dataIndex: 'phone',key:'phone'},
        {title: '入住时间',dataIndex: 'checkIn',key: 'checkIn',},
        {title: '退房时间',dataIndex: 'checkOut',key:'checkOut'},
        {
            title: '操作', dataIndex: '_id',
            render:(_, record)=>{ 
                return <> 
                            <Button  variant="outline" size="small" onClick={()=>confirm(record)}>删除</Button> 
                            <Button variant="outline" style={{ marginLeft: '5px' }} size="small"  onClick={()=>Edit(record)}>修改</Button> 
                        </>
            }
        },
    ], [])

    const [data,setData] = useState([]);
    const [limit,setLimit] = useState(8);
    const [page,setPage] = useState(1); 
    const [total, setTotal] = useState(0);
    
    // 获取全部数据
    const getData = async ()=>{
        const postData = { limit, page };   
        let res = await getAllOrder(postData)
        const { success, data, count } = res;
        console.log(res)
        if (success) {
            setData(data);
            setTotal(count)
        }; 
    }
    useLayoutEffect(()=>{
        getData();
    }, [limit, page])

    const changepage = (page,limit) => {
        setPage(page);
        setLimit(limit)
    }

    const confirm = record => {
        
    }

    const Edit = record => {
        
    }


    return (
        <div>
            <Row>
                <Col span={6}>
                    <Input placeholder="姓名搜索"></Input>
                </Col>
                <Col span={2}></Col>
                <Col span={6}>
                    <Input placeholder="电话号码搜索"></Input>
                </Col>
                <Col span={2}></Col>
                <Col span={6}>
                    <Input placeholder="身份证号码搜索"></Input>
                </Col>
                <Col span={2}></Col>
            </Row>
            <Row>
                <Col span={6}>
                    <Input placeholder="价格搜索"></Input>
                </Col>
                <Col span={2}></Col>
                <Col span={6}>
                    <Input placeholder="房间号搜索"></Input>
                </Col>
                <Col span={2}></Col>
                <Col span={6}>
                    <DatePicker  />
                </Col>
                <Col span={2}></Col>
            </Row>
            <Row>
                <Col span={10}></Col>
                <Col span={4}>           
                    <Button type="primary" htmlType="submit">立即搜索</Button>
                </Col>
                <Col span={10}></Col>
            </Row>
            <div>
                <Table
                    columns={columns}
                    dataSource={data}
                    rowKey={data._id}
                    pagination={
                        {
                            defaultPageSize: limit,
                            defaultCurrent:page,
                            total: total,
                            current:page,
                            onChange:changepage
                        }
                    }
                />
            </div>
        </div>
    )
}

export default QueryOrder